<!-- 最新新闻 -->
<template>
  <div class="news">
    <div class="news_div">
      最新新闻
      <span style="float:right;">----来源知乎</span>
    </div>
    <ul class="news_ul" v-for="(item,index) in news" :key="index">
      <van-swipe lazy-render>
        <van-swipe-item
          style="height:200px;"
          v-for="(items,indexs)  in  item.images "
          :key="indexs"
          @click.stop="bigImg(index,indexs)"
          fit="contain"
        >
          <img :src="items" class="swip_img" fit="contain" style="width:130px;" />
        </van-swipe-item>
      </van-swipe>
      <div class="news_ul_div2" @click="goDetial(index)">
        <li class="title">{{item.title}}</li>
        <!-- <li class="tip">
          <a @click="goDetial(index)">查看详情</a>
        </li>-->
        <li class="date">
          作者:{{item.hint}}
          <br />
          时间:{{date}}
        </li>
      </div>
    </ul>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
export default {
  components: {},
  data() {
    return {
      news: [],
      date: '',
      newsId: 0,
    }
  },
  created() {
    this.init()
    console.log(this.$path.ALAPI_TOKEN)
  },
  methods: {
    async init() {
      const res = await this.$axios.get('https://v2.alapi.cn/api/zhihu', {
        params: {
          token: this.$path.ALAPI_TOKEN,
        },
      })
      if ((res.data.code = 200)) {
        this.news = res.data.data.stories
        let time = res.data.data.date
        this.date = `${time.slice(0, 4)}年
        ${time.slice(4, 6)}月
        ${time.slice(6, 8)}日`
      }
    },
    goDetial(index) {
      this.newsId = this.news[index].id
      this.$router.push('/newsDetail/' + this.newsId)
    },

    // 大图
    bigImg(index, indexs) {
      ImagePreview({
        images: this.news[index].images, // 预览图片的那个数组
        loop: false,
        closeable: true,
        startPosition: indexs, // 指明预览第几张图
      })
    },
  },
}
</script>

<style scoped>
.news {
  margin-top: 10px;
  padding: 5px 10px 5px 10px;
}
.news_div {
  margin-bottom: 10px;
  position: relative;
  margin-right: 10px;
  box-sizing: border-box;
  font-size: 16px;
}
.news_div:before {
  display: block;
  height: 100%;
  width: 2px;
  content: ' ';
  background-color: red;
  position: absolute;
  /* top: 100; */
  left: -8px;
  transform: translate(50%, 0%);
}

.news_ul {
  padding: 10px 0 10px 0;
  border-top: #eeeeee 1px solid;
  border-bottom: #dcdee0 1px dashed;
  display: flex;
  flex-wrap: nowrap;
  box-sizing: border-box;
}
.news_ul_div > img {
  width: 100px;
  height: 100%;
}
.title {
  width: 100%;
  font-size: 0.45rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.date {
  font-size: 12px;
}
.news_ul_div2 {
  padding-left: 10px;

  box-sizing: border-box;
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.tip {
  font-size: 0.42667rem;

  text-align: right;
  margin-right: 17px;
  color: #ccc !important;
}
</style>
